<template>
  <div class="waitorder">
    <div v-if="tableData">
    <el-table   style="width:100%;margin-left:-18px;"
          :data="tableData" border  class="cate_table"  >

           <el-table-column
            align="center"
            prop="number"
            label="订单号"
            width="150px"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="name"
            label="订单菜品"
            width="180px"
          >

          </el-table-column>

          <el-table-column align="center" prop="address" label="地址" width="194px">

          </el-table-column>

          <el-table-column
            align="center"
            prop="estimatedDeliveryTime"
            label="预计送达时间"
            width="160px"
          >

           </el-table-column>

           <el-table-column
            align="center"
            prop="remark"
            label="备注"
            width="150px"   >
             </el-table-column >

              <el-table-column
            align="center"
            prop="tablewareNumber"
            label="餐具数量"
            width="100px"   >
             </el-table-column >

            <el-table-column align="center" label="操作" width="210px">
             <template slot-scope="scope">
               <slot  name="operate">

            <el-button style="border:none;color:rgb(64,158,255)" @click="receivingorders( scope.$index)"  size="mini"  >接单</el-button >
            <el-button  style="border:none;color:rgb(245,108,108)" @click="reject( scope.$index)"  size="mini">拒单</el-button>

             <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>

             </slot>
             </template>

          </el-table-column>

        </el-table>
         <!-- 订单详情弹窗 -->
       <OrderDetail :dialogVisibles="dialogVisible"></OrderDetail>
      </div>

     <div style="padding-left:300px;padding-top:20px" v-else><img style="width:50%" src="@/assets/table_empty.png" alt=""></div>

  </div>
</template>

<script>
import Bus from '@/utils/EventBus'
import { updateStatus } from '@/api/orderDetail'
import OrderDetail from '@/components/main/order/orderdetail.vue'
export default {
  name: 'waitorderIndex',
  components: {
    OrderDetail
  },
  props: {
    tableData: Array

  },
  created () {
    this.$emit('refresh', this.status)
  },

  data () {
    return {
      status: 2,
      dialogVisible: false

    }
  },
  methods: {
    // 查看订单
    viewChandler (index) {
      Bus.$emit('view', !this.dialogVisible, this.tableData, index)
    },
    // 修改订单状态-接单
    async  receivingorders (index) {
      await updateStatus(this.tableData[index].id, 3)
      this.$emit('refresh', 2)
    },
    // 修改订单状态-拒单
    reject (index) {
      this.$confirm('确认要拒单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(this.tableData[index].id, 7).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，拒单成功')
            this.$emit('refresh', 2)
          } else {
            this.$message.error('很遗憾，拒单失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消动作'
        })
      })
    }

  }
}
</script>

<style lang="less" scoped>
// 表格
.order_main{
  width: 1145px;
  height: 450px;
  padding-top: 40px;
  padding-left: 40px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);
  margin-top:40px;
  margin-left:20px
}

</style>
